<template>
  <div class="header_container">
    <!-- 返回按钮  或者是显示 面包屑-->
    <div v-if="displayNavButton">
      <router-link :to="backRouterPath" slot="left">
        <el-button type="primary">&lt; &nbsp; 返 回</el-button>
      </router-link>
    </div>
    <div v-else>
      <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item :to="{ path: '/homeManager' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{
          item
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <h1 style="position:absolute; left:50%" type="primary">
      {{ topBarTitle }}
    </h1>
  </div>
</template>

<script>
export default {
  props: {
    //是否显示返回按钮
    displayNavButton: {
      type: Boolean,
      default: false
    },

    backRouterPath: {
      type: String,
      default: "/"
    },
    topBarTitle: {
      type: String,
      default: ""
    }
  },

  components: {},

  mounted() {}
};
</script>

<style lang="less" scoped>
@import "../style/mixin.less";
.header_container {
  background-color: #eff2f7;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
</style>
